<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue2.6.10.js"></script>
		<style type="text/css">
			.red{
				color: red;
			}
			.thin{
				font-weight: 200;
			}
			.italic{
				/* 倾斜 */
				font-style: italic;
			}
			.active{
				letter-spacing: 0.5em;
			}
		</style>
	</head> 
	<body>
		<div id="app">
			<!-- <h1 class="red thin italic">这是一个很大很大的h1，大到你无法想象！！！</h1> -->
			
			
			<!-- 第一种使用方式，直接传递一个数组，这里的 class 需要使用 v-bind 做数据绑定 -->
			<!-- <h1 :class="['red','thin']">这是一个很大很大的h1，大到你无法想象！！！</h1> -->
			
	
	
			<!-- 在数组中使用三元表达式 -->
			<!-- <h1 :class="['red','thin',flag?'active':'']">这是一个很大很大的h1，大到你无法想象！！！</h1> -->
			
			
			<!-- 在数组中使用对象来代替三元表达式，来提高代码的可读性 -->
			<!-- <h1 :class="['red','thin',{'active':flag}]">这是一个很大很大的h1，大到你无法想象！！！</h1> -->
			
			
			
			
			<h1 :class="classStyle">这是一个很大很大的h1，大到你无法想象！！！</h1>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data(){
				return{
					flag:false,
					classStyle:{red:true,thin:true,italic:false}
				}
			},
			methods:{
				
			}
		})
	</script>
</html>
